<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Box Model Module Level 3</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="exploring" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="This specification describes the margin and padding properties, which create spacing in and around a CSS box. It may later be extended to include borders (currently described in [[css-backgrounds-3]])." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<style>
  body {
    background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat;
  }
  </style>
  <link href="https://www.w3.org/TR/css-box-3/" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Box Model Module Level 3</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <details>
    <summary>Specification Metadata</summary>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://drafts.csswg.org/css-box-3/">https://drafts.csswg.org/css-box-3/</a>
      <dt>Latest published version:
      <dd><a href="https://www.w3.org/TR/css-box-3/">https://www.w3.org/TR/css-box-3/</a>
      <dt>Previous Versions:
      <dd><a href="https://www.w3.org/TR/2018/WD-css-box-3-20180802/" rel="prev">https://www.w3.org/TR/2018/WD-css-box-3-20180802/</a>
      <dt class="editor">Editor:
      <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (<span class="p-org org">Invited Expert</span>)
      <dt>Suggest an Edit for this Spec:
      <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/css-box-3/Overview.bs">GitHub Editor</a>
      <dt>Issue Tracking:
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-box-3">GitHub Issues</a>
     </dl>
    </div>
   </details>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This specification describes the margin and padding properties, which create spacing in and around a CSS box. It may later be extended to include borders (currently described in <a data-link-type="biblio" href="#biblio-css-backgrounds-3">[css-backgrounds-3]</a>).</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-box” in the title,
	preferably like this:
	“[css-box] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
	and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
     <ol class="toc">
      <li><a href="#values"><span class="secno">1.1</span> <span class="content"> Values</span></a>
      <li><a href="#placement"><span class="secno">1.2</span> <span class="content"> Module Interactions</span></a>
     </ol>
    <li>
     <a href="#box-model"><span class="secno">2</span> <span class="content">The CSS Box Model</span></a>
     <ol class="toc">
      <li><a href="#keywords"><span class="secno">2.1</span> <span class="content">Box-edge Keywords</span></a>
     </ol>
    <li>
     <a href="#margins"><span class="secno">3</span> <span class="content">Margins</span></a>
     <ol class="toc">
      <li><a href="#margin-physical"><span class="secno">3.1</span> <span class="content">Page-relative (Physical) Margin Properties: the <span class="property">margin-top</span>, <span class="property">margin-right</span>, <span class="property">margin-bottom</span>, and <span class="property">margin-left</span> properties</span></a>
      <li><a href="#margin-shorthand"><span class="secno">3.2</span> <span class="content">Margin Shorthand: the <span class="property">margin</span> property</span></a>
      <li><a href="#margin-trim"><span class="secno">3.3</span> <span class="content">Margins at Container Edges: the <span class="property">margin-trim</span> property</span></a>
     </ol>
    <li>
     <a href="#paddings"><span class="secno">4</span> <span class="content">Padding</span></a>
     <ol class="toc">
      <li><a href="#padding-physical"><span class="secno">4.1</span> <span class="content">Page-relative (Physical) Padding Properties: the <span class="property">padding-top</span>, <span class="property">padding-right</span>, <span class="property">padding-bottom</span>, and <span class="property">padding-left</span> properties</span></a>
      <li><a href="#padding-shorthand"><span class="secno">4.2</span> <span class="content">Padding Shorthand: the <span class="property">padding</span> property</span></a>
     </ol>
    <li><a href="#borders"><span class="secno">5</span> <span class="content">Borders</span></a>
    <li><a href="#changes"><span class="secno">6</span> <span class="content">Changes Since CSS Level 2</span></a>
    <li><a href="#priv-sec"><span class="secno">7</span> <span class="content">Privacy and Security Considerations</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p><em>This subsection is not normative.</em> </p>
   <p>CSS describes how each element
	and each string of text in a source document
	is laid out by transforming the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-tree" id="ref-for-concept-document-tree">document tree</a> into a set of <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box">boxes</a>,
	whose size, position, and stacking level on the <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/coords.html#TermCanvas" id="ref-for-TermCanvas">canvas</a> depend on the values of their CSS properties. </p>
   <p class="note" role="note"><span>Note:</span> <a href="https://www.w3.org/TR/css-cascade/">CSS Cascading and Inheritance</a> describes how properties are assigned to elements in the box tree,
	while <a href="https://www.w3.org/TR/css-display-3/#intro">CSS Display 3 §1 Introduction</a> describes how the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-tree" id="ref-for-concept-document-tree①">document tree</a> is transformed into the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box tree" id="ref-for-box tree">box tree</a>.</p>
   <p>Each CSS <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box①">box</a> has a rectangular content area,
	a band of padding around the content,
	a border around the padding,
	and a margin outside the border.
	The <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#sizing-property" id="ref-for-sizing-property">sizing properties</a> <a data-link-type="biblio" href="#biblio-css-sizing-3">[css-sizing-3]</a>,
	together with various other properties that control layout,
	define the size of the content area.
	The box styling properties—<wbr><a class="property" data-link-type="propdesc" href="#propdef-padding" id="ref-for-propdef-padding">padding</a> and its longhands, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border" id="ref-for-propdef-border">border</a> and its longhands,
	and <a class="property" data-link-type="propdesc" href="#propdef-margin" id="ref-for-propdef-margin">margin</a> and its longhands—<wbr>define the sizes of these other areas.
	Margins and padding are defined in this module;
	borders are defined in <a data-link-type="biblio" href="#biblio-css-backgrounds-3">[css-backgrounds-3]</a>. </p>
   <p class="note" role="note"><span>Note:</span> This module <a href="https://www.w3.org/TR/2018/WD-css3-box-20180731/">originally contained</a> the CSS Level 3 specification prose relating to
	box generation (now defined in <a data-link-type="biblio" href="#biblio-css-display-3">[css-display-3]</a>),
	the box model (defined here),
	as well as block layout (now only defined in <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> Chapters 9 and 10).
	Since its maintenance was put aside during the development of CSS2.1,
	its prose was severely outdated by the time CSS2 Revision 1
	was finally completed.
	Therefore, the block layout portion of the prose has been retired,
	to be re-synched to <a href="https://www.w3.org/TR/CSS2">CSS2</a> and updated
	as input to a new Block Layout module at some point in the future.
	It is being split apart from this module
	and from the <a href="https://www.w3.org/TR/css-display/">CSS Display Module</a> both because of the practical concern that it would be a huge amount of work
	and also in recognition that CSS now has multiple layout models
	(<a href="https://www.w3.org/TR/css-flexbox/">Flex Layout</a>, <a href="https://www.w3.org/TR/css-grid/">Grid Layout</a>, <a href="https://www.w3.org/TR/css-position/">Positioned Layout</a>,
	and <a href="https://www.w3.org/TR/css-tables/">Table Layout</a>,
	in addition to Block Layout)
	which each deserve their own parallel module.</p>
   <h3 class="heading settled" data-level="1.1" id="values"><span class="secno">1.1. </span><span class="content"> Values</span><a class="self-link" href="#values"></a></h3>
   <p>This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from <a data-link-type="biblio" href="#biblio-css-values-3">[CSS-VALUES-3]</a>.
	Value types not defined in this specification are defined in CSS Values &amp; Units <span>[CSS-VALUES-3]</span>.
	Other CSS modules may expand the definitions of these value types.</p>
   <p>In addition to the property-specific values listed in their definitions,
	all properties defined in this specification
	also accept the <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> keywords as their property value.
	For readability they have not been repeated explicitly.</p>
   <h3 class="heading settled" data-level="1.2" id="placement"><span class="secno">1.2. </span><span class="content"> Module Interactions</span><a class="self-link" href="#placement"></a></h3>
   <p>This module replaces the definitions of the margin and padding properties
	defined in <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> sections 8.1, 8.2, 8.3 (but not 8.3.1), and 8.4. </p>
   <p>All properties in this module apply to the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line" id="ref-for-selectordef-first-line">::first-line</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter" id="ref-for-selectordef-first-letter">::first-letter</a> pseudo-elements. </p>
   <h2 class="heading settled" data-level="2" id="box-model"><span class="secno">2. </span><span class="content">The CSS Box Model</span><a class="self-link" href="#box-model"></a></h2>
   <p>Each box has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="content-area">content area</dfn> (which contains its content—<wbr>text, descendant boxes, an image or other <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#replaced-element" id="ref-for-replaced-element">replaced element</a> content, etc.)
	and optional surrounding <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="padding area" id="padding-area">padding</dfn>, <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="border area" id="border-area">border</dfn>,
	and <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="margin area" id="margin-area">margin areas</dfn>;
	the size of each area is specified by corresponding properties,
	and can be zero
	(or in the case of margins, negative).
	The following diagram shows how these areas relate
	and the terminology used to refer to the various parts of the box: </p>
   <div class="figure">
    <p><img alt="Diagram of a typical box, showing the
		content, padding, border and margin areas" src="images/box.png"> </p>
    <p class="caption">The various areas and edges of a typical box. </p>
   </div>
   <p>The margin, border, and padding can be broken down into
	top, right, bottom, and left segments,
	each of which can be controlled independently
	by its corresponding property.</p>
   <p>The perimeter of each of the four areas
	(content, padding, border, and margin)
	is called an “edge”,
	and each edge can be broken down into
	a top, right, bottom, and left side.
	Thus each <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box②">box</a> has four edges
	each composed of four sides:</p>
   <dl>
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="content-edge">content edge</dfn> or <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="inner-edge">inner edge</dfn> 
    <dd> The content edge surrounds
			the rectangle given by the width and height of the box,
			which often depend on the element’s content
			and/or its <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block">containing block</a> size.
			The four sides of the <a data-link-type="dfn" href="#content-edge" id="ref-for-content-edge">content edge</a> together
			define the box’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="content-box">content box</dfn>. 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="padding-edge">padding edge</dfn> 
    <dd> The padding edge surrounds
			the box’s padding.
			If the padding has zero width on a given side,
			the padding edge coincides with the content edge on that side.
			The four sides of the <a data-link-type="dfn" href="#padding-edge" id="ref-for-padding-edge">padding edge</a> together
			define the box’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="padding-box">padding box</dfn>,
			which contains both the <a data-link-type="dfn" href="#content-area" id="ref-for-content-area">content</a> and <a data-link-type="dfn" href="#padding-area" id="ref-for-padding-area">padding areas</a>. 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="border-edge">border edge</dfn> 
    <dd> The border edge surrounds the box’s border.
			If the border has zero width on a given side,
			the border edge coincides with the padding edge on that side.
			The four sides of the <a data-link-type="dfn" href="#border-edge" id="ref-for-border-edge">border edge</a> together
			define the box’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="border-box">border box</dfn>,
			which contains the box’s <a data-link-type="dfn" href="#content-area" id="ref-for-content-area①">content</a>, <a data-link-type="dfn" href="#padding-area" id="ref-for-padding-area①">padding</a>,
			and <a data-link-type="dfn" href="#border-area" id="ref-for-border-area">border areas</a>. 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="margin-edge">margin edge</dfn> or <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="outer-edge">outer edge</dfn> 
    <dd> The margin edge surrounds the box’s margin.
			If the margin has zero width on a given side,
			the margin edge coincides with the border edge on that side.
			The four sides of the <a data-link-type="dfn" href="#margin-edge" id="ref-for-margin-edge">margin edge</a> together
			define the box’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="margin-box">margin box</dfn>,
			which contains the all of the box’s <a data-link-type="dfn" href="#content-area" id="ref-for-content-area②">content</a>, <a data-link-type="dfn" href="#padding-area" id="ref-for-padding-area②">padding</a>, <a data-link-type="dfn" href="#border-area" id="ref-for-border-area①">border</a>,
			and <a data-link-type="dfn" href="#margin-area" id="ref-for-margin-area">margin areas</a>. 
   </dl>
   <p>The background of the content, padding, and border areas of a box
	is specified by its <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background" id="ref-for-propdef-background">background</a> properties.
	The border area can additionally be painted with a border style
	using the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border" id="ref-for-propdef-border①">border</a> properties.
	Margins are always transparent.
	See <a data-link-type="biblio" href="#biblio-css-backgrounds-3">[css-backgrounds-3]</a>.</p>
   <p>When a box <a href="https://www.w3.org/TR/css-break-3/#fragmentation-model">fragments</a>—<wbr>is broken, as across lines or across pages, into separate <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#box-fragment" id="ref-for-box-fragment">box fragments</a>—<wbr>each of its boxes
	(<a data-link-type="dfn" href="#content-box" id="ref-for-content-box">content box</a>, <a data-link-type="dfn" href="#padding-box" id="ref-for-padding-box">padding box</a>, <a data-link-type="dfn" href="#border-box" id="ref-for-border-box">border box</a>, <a data-link-type="dfn" href="#margin-box" id="ref-for-margin-box">margin box</a>)
	also fragments.
	How the content/padding/border/margin areas react to fragmentation
	is specified in <a data-link-type="biblio" href="#biblio-css-break-3">[css-break-3]</a> and controlled by the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-break-4/#propdef-box-decoration-break" id="ref-for-propdef-box-decoration-break">box-decoration-break</a> property.</p>
   <h3 class="heading settled" data-level="2.1" id="keywords"><span class="secno">2.1. </span><span class="content">Box-edge Keywords</span><a class="self-link" href="#keywords"></a></h3>
   <p>The following CSS keywords are defined for use
	in properties (such as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-1/#propdef-transform-box" id="ref-for-propdef-transform-box">transform-box</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-clip" id="ref-for-propdef-background-clip">background-clip</a>)
	that need to refer to various box edges:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="<box>,<shape-box>,<geometry-box>" data-dfn-type="value" data-export id="valdef-box-content-box">content-box</dfn> 
    <dd> Refers to the <a data-link-type="dfn" href="#content-box" id="ref-for-content-box①">content box</a> or <a data-link-type="dfn" href="#content-edge" id="ref-for-content-edge①">content edge</a>.
				(In an SVG context, treated as <a class="css" data-link-type="maybe" href="#valdef-box-fill-box" id="ref-for-valdef-box-fill-box">fill-box</a>.) 
    <dt><dfn class="css" data-dfn-for="<box>,<shape-box>,<geometry-box>" data-dfn-type="value" data-export id="valdef-box-padding-box">padding-box<a class="self-link" href="#valdef-box-padding-box"></a></dfn> 
    <dd> Refers to the <a data-link-type="dfn" href="#padding-box" id="ref-for-padding-box①">padding box</a> or <a data-link-type="dfn" href="#padding-edge" id="ref-for-padding-edge①">padding edge</a>.
				(In an SVG context, treated as <a class="css" data-link-type="maybe" href="#valdef-box-fill-box" id="ref-for-valdef-box-fill-box①">fill-box</a>.) 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<box>,<shape-box>,<geometry-box>" data-dfn-type="value" data-export id="valdef-box-border-box">border-box</dfn> 
    <dd> Refers to the <a data-link-type="dfn" href="#border-box" id="ref-for-border-box①">border box</a> or <a data-link-type="dfn" href="#border-edge" id="ref-for-border-edge①">border edge</a>.
				(In an SVG context, treated as <a class="css" data-link-type="maybe" href="#valdef-box-stroke-box" id="ref-for-valdef-box-stroke-box">stroke-box</a>.) 
    <dt><dfn class="css" data-dfn-for="<box>,<shape-box>,<geometry-box>" data-dfn-type="value" data-export id="valdef-box-margin-box">margin-box<a class="self-link" href="#valdef-box-margin-box"></a></dfn> 
    <dd> Refers to the <a data-link-type="dfn" href="#margin-box" id="ref-for-margin-box①">margin box</a> or <a data-link-type="dfn" href="#margin-edge" id="ref-for-margin-edge①">margin edge</a>.
				(In an SVG context, treated as <a class="css" data-link-type="maybe" href="#valdef-box-stroke-box" id="ref-for-valdef-box-stroke-box①">stroke-box</a>.) 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<box>,<shape-box>,<geometry-box>" data-dfn-type="value" data-export id="valdef-box-fill-box">fill-box</dfn> 
    <dd> Refers to the <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/coords.html#TermObjectBoundingBox" id="ref-for-TermObjectBoundingBox">object bounding box</a> or its edges.
				(In a CSS box context, treated as <a class="css" data-link-type="maybe" href="#valdef-box-content-box" id="ref-for-valdef-box-content-box">content-box</a>.) 
    <dt><dfn class="dfn-paneled css" data-dfn-for="<box>,<shape-box>,<geometry-box>" data-dfn-type="value" data-export id="valdef-box-stroke-box">stroke-box</dfn> 
    <dd> Refers to the <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/coords.html#TermStrokeBoundingBox" id="ref-for-TermStrokeBoundingBox">stroke bounding box</a> or its edges.
				(In a CSS box context, treated as <a class="css" data-link-type="maybe" href="#valdef-box-border-box" id="ref-for-valdef-box-border-box">border-box</a>.) 
    <dt><dfn class="css" data-dfn-for="<box>,<shape-box>,<geometry-box>" data-dfn-type="value" data-export id="valdef-box-view-box">view-box<a class="self-link" href="#valdef-box-view-box"></a></dfn> 
    <dd> Refers to the nearest <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/coords.html#TermSVGViewport" id="ref-for-TermSVGViewport">SVG viewport</a>.
				(In a CSS box context, treated as <a class="css" data-link-type="maybe" href="#valdef-box-border-box" id="ref-for-valdef-box-border-box①">border-box</a>.) 
   </dl>
   <p>For convenience, the following value types are defined:</p>
<pre><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-visual-box"><a class="production" data-link-type="type" href="#typedef-visual-box" id="ref-for-typedef-visual-box">&lt;visual-box></a></dfn> = content-box | padding-box | border-box
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-layout-box"><a class="production" data-link-type="type" href="#typedef-layout-box" id="ref-for-typedef-layout-box">&lt;layout-box></a></dfn> = content-box | padding-box | border-box | margin-box
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-paint-box"><a class="production" data-link-type="type" href="#typedef-paint-box" id="ref-for-typedef-paint-box">&lt;paint-box></a></dfn> = content-box | padding-box | border-box | fill-box | stroke-box
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-coord-box"><a class="production" data-link-type="type" href="#typedef-coord-box" id="ref-for-typedef-coord-box">&lt;coord-box></a></dfn> = content-box | padding-box | border-box | fill-box | stroke-box | view-box
</pre>
   <h2 class="heading settled" data-level="3" id="margins"><span class="secno">3. </span><span class="content">Margins</span><a class="self-link" href="#margins"></a></h2>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="margin" id="margin">Margins</dfn> surround the border edge of a box,
	providing spacing between boxes.
	The <dfn data-dfn-type="dfn" data-export id="margin-properties">margin properties<a class="self-link" href="#margin-properties"></a></dfn> specify the thickness
	of the <a data-link-type="dfn" href="#margin-area" id="ref-for-margin-area①">margin area</a> of a box.
	The <a class="property" data-link-type="propdesc" href="#propdef-margin" id="ref-for-propdef-margin①">margin</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#shorthand-property" id="ref-for-shorthand-property">shorthand property</a> sets the margin for all four sides
	while the margin <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#longhand" id="ref-for-longhand">longhand properties</a> only set their respective side.
	This specification defines the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#physical" id="ref-for-physical">physical</a> <span class="property" id="ref-for-propdef-margin②">margin</span> <span id="ref-for-longhand①">longhands</span>; <a href="https://www.w3.org/TR/css-logical-1/#margin-properties">CSS Logical Properties 1 §4.2 Flow-relative Margins: the margin-block-start, margin-block-end, margin-inline-start, margin-inline-end properties and margin-block and margin-inline shorthands</a> additionally
	defines <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative">flow-relative</a> <span class="property" id="ref-for-propdef-margin③">margin</span> <span id="ref-for-longhand②">longhands</span>.
	Both sets of properties control the same set of margins:
	they are just different ways of indexing each side.</p>
   <p class="note" role="note"><span>Note:</span> Adjoining margins in <a data-link-type="dfn">block layout</a> <em>collapse</em>.
	See <a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins">CSS2§8.3.1 Collapsing Margins</a> for details.
	Also, margins adjoining a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-break" id="ref-for-fragmentation-break">fragmentation break</a> are sometimes truncated.
	See <a href="https://www.w3.org/TR/css3-break/#break-margins">CSS Fragmentation 3 §5.2 Adjoining Margins at Breaks</a> for details.</p>
   <h3 class="heading settled" data-level="3.1" id="margin-physical"><span class="secno">3.1. </span><span class="content">Page-relative (Physical) Margin Properties: the <a class="property" data-link-type="propdesc" href="#propdef-margin-top" id="ref-for-propdef-margin-top">margin-top</a>, <a class="property" data-link-type="propdesc" href="#propdef-margin-right" id="ref-for-propdef-margin-right">margin-right</a>, <a class="property" data-link-type="propdesc" href="#propdef-margin-bottom" id="ref-for-propdef-margin-bottom">margin-bottom</a>, and <a class="property" data-link-type="propdesc" href="#propdef-margin-left" id="ref-for-propdef-margin-left">margin-left</a> properties</span><a class="self-link" href="#margin-physical"></a></h3>
   <table class="def propdef" data-link-for-hint="margin-top">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-top">margin-top</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-right">margin-right</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-bottom">margin-bottom</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-left">margin-left</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage">&lt;length-percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> auto 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>0 
     <tr>
      <th>Applies to:
      <td>all elements except <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#internal-table-element" id="ref-for-internal-table-element">internal table elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>refer to <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#logical-width" id="ref-for-logical-width">logical width</a> of containing block 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>the keyword <span class="css">auto</span> or a computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①">&lt;length-percentage></a> value 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <p>These properties set the top, right, bottom, and left <a data-link-type="dfn" href="#margin" id="ref-for-margin">margin</a> of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box③">box</a>, respectively.</p>
   <p>Negative values for margin properties are allowed,
	but there may be implementation-specific limits.</p>
   <h3 class="heading settled" data-level="3.2" id="margin-shorthand"><span class="secno">3.2. </span><span class="content">Margin Shorthand: the <a class="property" data-link-type="propdesc" href="#propdef-margin" id="ref-for-propdef-margin④">margin</a> property</span><a class="self-link" href="#margin-shorthand"></a></h3>
   <table class="def propdef" data-link-for-hint="margin">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin">margin</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-margin-top" id="ref-for-propdef-margin-top①">&lt;'margin-top'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range">{1,4}</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>0 
     <tr>
      <th>Applies to:
      <td>all elements except <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#internal-table-element" id="ref-for-internal-table-element①">internal table elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>refer to <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#logical-width" id="ref-for-logical-width①">logical width</a> of containing block 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-margin" id="ref-for-propdef-margin⑤">margin</a> property is a shorthand property for setting <a class="property" data-link-type="propdesc" href="#propdef-margin-top" id="ref-for-propdef-margin-top②">margin-top</a>, <a class="property" data-link-type="propdesc" href="#propdef-margin-right" id="ref-for-propdef-margin-right①">margin-right</a>, <a class="property" data-link-type="propdesc" href="#propdef-margin-bottom" id="ref-for-propdef-margin-bottom①">margin-bottom</a>, and <a class="property" data-link-type="propdesc" href="#propdef-margin-left" id="ref-for-propdef-margin-left①">margin-left</a> in a single declaration.</p>
   <p>If there is only one component value,
	it applies to all sides.
	If there are two values,
	the top and bottom margins are set to the first value
	and the right and left margins are set to the second.
	If there are three values,
	the top is set to the first value,
	the left and right are set to the second,
	and the bottom is set to the third.
	If there are four values
	they apply to the top, right, bottom, and left, respectively.</p>
   <div class="example" id="example-2e169656">
    <a class="self-link" href="#example-2e169656"></a> The following code demonstrates some possible <a class="property" data-link-type="propdesc" href="#propdef-margin" id="ref-for-propdef-margin⑥">margin</a> declarations. 
<pre>body { margin: 2em }         /* all margins set to 2em */
body { margin: 1em 2em }     /* top &amp; bottom = 1em, right &amp; left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
</pre>
    <p>The last rule of the example above is equivalent to the example below:</p>
<pre>body {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em; /* copied from opposite side (right) */
}
</pre>
   </div>
   <h3 class="heading settled" data-level="3.3" id="margin-trim"><span class="secno">3.3. </span><span class="content">Margins at Container Edges: the <a class="property" data-link-type="propdesc" href="#propdef-margin-trim" id="ref-for-propdef-margin-trim">margin-trim</a> property</span><a class="self-link" href="#margin-trim"></a></h3>
   <table class="def propdef" data-link-for-hint="margin-trim">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-margin-trim">margin-trim</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> in-flow <span id="ref-for-comb-one②">|</span> all 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none 
     <tr>
      <th>Applies to:
      <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-container" id="ref-for-block-container">block containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container">multi-column containers</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>keyword as specified 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>Oftentimes, margins are desired between siblings,
	but not at the start/end of the container
	where spacing can be controlled with padding.
	This property allows the container
	to trim the margins of its children
	where they adjoin the container’s edges.
	Values have the following meanings:</p>
   <dl>
    <dt><dfn class="css" data-dfn-for="margin-trim" data-dfn-type="value" data-export id="valdef-margin-trim-none">none<a class="self-link" href="#valdef-margin-trim-none"></a></dfn> 
    <dd>
      Margins are not trimmed by the container. 
     <p class="note" role="note"><span>Note:</span> However, in block layout,
			child margins can collapse with their parent.
			See <a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins">CSS2§8.3.1: Collapsing Margins</a>.</p>
    <dt><dfn class="dfn-paneled css" data-dfn-for="margin-trim" data-dfn-type="value" data-export id="valdef-margin-trim-in-flow">in-flow</dfn> 
    <dd> For in-flow boxes contained by this box,
			block-axis margins adjacent to the box’s edges
			are truncated to zero.
			It also truncates any margins collapsed with such a margin. 
    <dt><dfn class="css" data-dfn-for="margin-trim" data-dfn-type="value" data-export id="valdef-margin-trim-all">all<a class="self-link" href="#valdef-margin-trim-all"></a></dfn> 
    <dd> Trims the margins of in-flow boxes as for <a class="css" data-link-type="maybe" href="#valdef-margin-trim-in-flow" id="ref-for-valdef-margin-trim-in-flow">in-flow</a>,
			but also trims any float margin
			whose <a data-link-type="dfn" href="#margin-edge" id="ref-for-margin-edge②">margin edge</a> coincides
			with the container’s <a data-link-type="dfn" href="#content-edge" id="ref-for-content-edge②">content edge</a>. 
   </dl>
   <p>Specifically, for <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-container" id="ref-for-block-container①">block containers</a>, <a class="css" data-link-type="propdesc" href="#propdef-margin-trim" id="ref-for-propdef-margin-trim①">margin-trim: in-flow</a> or <span class="css" id="ref-for-propdef-margin-trim②">margin-trim: all</span> discards:</p>
   <ul>
    <li>The block-start margin of a block-level first child. 
    <li>The block-end margin of a block-level last child. 
    <li>Any margin collapsed with these margins. 
   </ul>
   <p><a class="css" data-link-type="propdesc" href="#propdef-margin-trim" id="ref-for-propdef-margin-trim③">margin-trim: all</a> also affects floats
	for which the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-container" id="ref-for-block-container②">block container</a> is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block①">containing block</a> by:</p>
   <ul>
    <li> Discarding the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-start" id="ref-for-block-start">block-start</a> <a data-link-type="dfn" href="#margin" id="ref-for-margin①">margin</a> of any float
			whose <span id="ref-for-block-start①">block-start</span> <a data-link-type="dfn" href="#outer-edge" id="ref-for-outer-edge">outer edge</a> coincides
			with the <span id="ref-for-block-start②">block-start</span> <a data-link-type="dfn" href="#inner-edge" id="ref-for-inner-edge">inner edge</a> of the container. 
    <li> Discarding the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-start" id="ref-for-inline-start">inline-start</a>/<a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-end" id="ref-for-inline-end">inline-end</a> <a data-link-type="dfn" href="#margin" id="ref-for-margin②">margin</a> of an <span id="ref-for-inline-start①">inline-start</span>/<span id="ref-for-inline-end①">inline-end</span> float (or equivalent)
			whose <a data-link-type="dfn" href="#outer-edge" id="ref-for-outer-edge①">outer edge</a> on that side coincides
			with the <a data-link-type="dfn" href="#inner-edge" id="ref-for-inner-edge①">inner edge</a> of the container. 
    <li> Zeroing the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis">inline-axis</a> margins of a float
			for the purpose of calculating its <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-size-contribution" id="ref-for-intrinsic-size-contribution">intrinsic size contributions</a> or its <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#size" id="ref-for-size">size</a> in the container’s <span id="ref-for-inline-axis①">inline axis</span>. 
    <li> Trimming the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-end" id="ref-for-block-end">block-end</a> margins of a float
			to the extent necessary to prevent such a margin
			from extending the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-size" id="ref-for-block-size">block size</a> of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-formatting-context-root" id="ref-for-block-formatting-context-root">block formatting context root</a>. 
   </ul>
   <p class="issue" id="issue-565fb2af"><a class="self-link" href="#issue-565fb2af"></a> Should this property apply to <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container">flex containers</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container">grid containers</a>?</p>
   <p class="issue" id="issue-9536d78c"><a class="self-link" href="#issue-9536d78c"></a> Should floats have a <span class="css">floats</span> value that only affects floats?</p>
   <p class="note" role="note"><span>Note:</span> See also the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-break-4/#propdef-margin-break" id="ref-for-propdef-margin-break">margin-break</a> property,
	which applies to the box’s own margins
	when they adjoin a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-break" id="ref-for-fragmentation-break①">fragmentation break</a> (page break / column break / etc.).</p>
   <p class="issue" id="issue-c93b5c6f"><a class="self-link" href="#issue-c93b5c6f"></a> Define how this property affects margins at breaks
	if the box establishes a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-context" id="ref-for-fragmentation-context">fragmentation context</a>.
	See also <a href="https://github.com/w3c/csswg-drafts/issues/3314">Issue 3314</a>.</p>
   <h2 class="heading settled" data-level="4" id="paddings"><span class="secno">4. </span><span class="content">Padding</span><a class="self-link" href="#paddings"></a></h2>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="padding">Padding</dfn> is inserted between the content edge
	and the padding edge of a box,
	providing spacing between the content and the border.
	The <dfn data-dfn-type="dfn" data-export id="padding-properties">padding properties<a class="self-link" href="#padding-properties"></a></dfn> specify the thickness
	of the <a data-link-type="dfn" href="#padding-area" id="ref-for-padding-area③">padding area</a> of a box.
	The <a class="property" data-link-type="propdesc" href="#propdef-padding" id="ref-for-propdef-padding①">padding</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#shorthand-property" id="ref-for-shorthand-property①">shorthand property</a> sets the padding for all four sides
	while the padding <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#longhand" id="ref-for-longhand③">longhand properties</a> only set their respective side.
	This specification defines the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#physical" id="ref-for-physical①">physical</a> <span class="property" id="ref-for-propdef-padding②">padding</span> <span id="ref-for-longhand④">longhands</span>; <a href="https://www.w3.org/TR/css-logical-1/#padding-properties">CSS Logical Properties 1 §4.4 Flow-relative Padding: the padding-block-start, padding-block-end, padding-inline-start, padding-inline-end properties and padding-block and padding-inline shorthands</a> additionally
	defines <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative①">flow-relative</a> <span class="property" id="ref-for-propdef-padding③">padding</span> <span id="ref-for-longhand⑤">longhands</span>.
	Both sets of properties control the same set of padding:
	they are just different ways of indexing each side.</p>
   <p class="note" role="note"><span>Note:</span> Backgrounds specified on the box
	are by default laid out and painted within the padding edges.
	(They are additionally painted underneath the border,
	in the <a data-link-type="dfn" href="#border-area" id="ref-for-border-area②">border area</a>.)
	This behavior can be adjusted
	using the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin" id="ref-for-propdef-background-origin">background-origin</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-clip" id="ref-for-propdef-background-clip①">background-clip</a> properties.</p>
   <h3 class="heading settled" data-level="4.1" id="padding-physical"><span class="secno">4.1. </span><span class="content">Page-relative (Physical) Padding Properties: the <a class="property" data-link-type="propdesc" href="#propdef-padding-top" id="ref-for-propdef-padding-top">padding-top</a>, <a class="property" data-link-type="propdesc" href="#propdef-padding-right" id="ref-for-propdef-padding-right">padding-right</a>, <a class="property" data-link-type="propdesc" href="#propdef-padding-bottom" id="ref-for-propdef-padding-bottom">padding-bottom</a>, and <a class="property" data-link-type="propdesc" href="#propdef-padding-left" id="ref-for-propdef-padding-left">padding-left</a> properties</span><a class="self-link" href="#padding-physical"></a></h3>
   <table class="def propdef" data-link-for-hint="padding-top">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding-top">padding-top</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding-right">padding-right</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding-bottom">padding-bottom</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding-left">padding-left</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②">&lt;length-percentage></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>0 
     <tr>
      <th>Applies to:
      <td>all elements except: <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#internal-table-element" id="ref-for-internal-table-element②">internal table elements</a> other than table cells 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>refer to <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#logical-width" id="ref-for-logical-width②">logical width</a> of containing block 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>a computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage③">&lt;length-percentage></a> value 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <p>These properties set the top, right, bottom, and left <a data-link-type="dfn" href="#padding" id="ref-for-padding">padding</a> of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box④">box</a>, respectively.</p>
   <p>Negative values for padding properties are invalid.</p>
   <h3 class="heading settled" data-level="4.2" id="padding-shorthand"><span class="secno">4.2. </span><span class="content">Padding Shorthand: the <a class="property" data-link-type="propdesc" href="#propdef-padding" id="ref-for-propdef-padding④">padding</a> property</span><a class="self-link" href="#padding-shorthand"></a></h3>
   <table class="def propdef" data-link-for-hint="padding">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-padding">padding</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-padding-top" id="ref-for-propdef-padding-top①">&lt;'padding-top'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range①">{1,4}</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>0 
     <tr>
      <th>Applies to:
      <td>all elements except: <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#internal-table-element" id="ref-for-internal-table-element③">internal table elements</a> other than table cells 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>refer to <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#logical-width" id="ref-for-logical-width③">logical width</a> of containing block 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value type 
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-padding" id="ref-for-propdef-padding⑤">padding</a> property is a shorthand property for setting <a class="property" data-link-type="propdesc" href="#propdef-padding-top" id="ref-for-propdef-padding-top②">padding-top</a>, <a class="property" data-link-type="propdesc" href="#propdef-padding-right" id="ref-for-propdef-padding-right①">padding-right</a>, <a class="property" data-link-type="propdesc" href="#propdef-padding-bottom" id="ref-for-propdef-padding-bottom①">padding-bottom</a>, and <a class="property" data-link-type="propdesc" href="#propdef-padding-left" id="ref-for-propdef-padding-left①">padding-left</a> in a single declaration.</p>
   <p>If there is only one component value,
	it applies to all sides.
	If there are two values,
	the top and bottom padding are set to the first value
	and the right and left padding are set to the second.
	If there are three values,
	the top is set to the first value,
	the left and right are set to the second,
	and the bottom is set to the third.</p>
   <div class="example" id="example-23862f1f">
    <a class="self-link" href="#example-23862f1f"></a> The following code demonstrates some possible <a class="property" data-link-type="propdesc" href="#propdef-padding" id="ref-for-propdef-padding⑥">padding</a> declarations. 
<pre>body { padding: 2em }         /* all padding set to 2em */
body { padding: 1em 2em }     /* top &amp; bottom = 1em, right &amp; left = 2em */
body { padding: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
</pre>
    <p>The last rule of the example above is equivalent to the example below:</p>
<pre>body {
  padding-top: 1em;
  padding-right: 2em;
  padding-bottom: 3em;
  padding-left: 2em; /* copied from opposite side (right) */
}
</pre>
   </div>
   <h2 class="heading settled" data-level="5" id="borders"><span class="secno">5. </span><span class="content">Borders</span><a class="self-link" href="#borders"></a></h2>
   <p><dfn data-dfn-type="dfn" data-export data-lt="border" id="border">Borders<a class="self-link" href="#border"></a></dfn> fill the <a data-link-type="dfn" href="#border-area" id="ref-for-border-area③">border area</a>,
	to visually delineate the edges of the box,
	The <dfn data-dfn-type="dfn" data-export id="border-properties">border properties<a class="self-link" href="#border-properties"></a></dfn> specify the thickness
	of the <span id="ref-for-border-area④">border area</span> of a box,
	as well as its drawing style and color.
	See <a href="https://www.w3.org/TR/css3-background/#borders">CSS Backgrounds 3 §4 Borders</a> for the definition
	of the physical variants of these properties; <a href="https://www.w3.org/TR/css-logical-1/#border-properties">CSS Logical Properties 1 §4.5 Flow-relative Borders</a> additionally
	defines <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative②">flow-relative</a> border <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#longhand" id="ref-for-longhand⑥">longhands</a>.
	Both sets of properties control the same set of borders:
	they are just different ways of indexing each side.</p>
   <h2 class="heading settled" data-level="6" id="changes"><span class="secno">6. </span><span class="content">Changes Since CSS Level 2</span><a class="self-link" href="#changes"></a></h2>
   <p>The following changes have been made to this module
	since <a href="https://www.w3.org/TR/CSS2/box.html">CSS Level 2</a>:</p>
   <ul>
    <li>Adding the <a class="property" data-link-type="propdesc" href="#propdef-margin-trim" id="ref-for-propdef-margin-trim④">margin-trim</a> property. 
    <li>Adapting the prose slightly to account for vertical <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode">writing modes</a>. 
   </ul>
   <h2 class="heading settled" data-level="7" id="priv-sec"><span class="secno">7. </span><span class="content">Privacy and Security Considerations</span><a class="self-link" href="#priv-sec"></a></h2>
   <p>Box Model introduces no new privacy leaks,
	or security considerations beyond "implement it correctly".</p>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#valdef-margin-trim-all">all</a><span>, in §3.3</span>
   <li><a href="#border">border</a><span>, in §5</span>
   <li><a href="#border-area">border area</a><span>, in §2</span>
   <li><a href="#valdef-box-border-box">border-box</a><span>, in §2.1</span>
   <li><a href="#border-box">border box</a><span>, in §2</span>
   <li><a href="#border-edge">border edge</a><span>, in §2</span>
   <li><a href="#border-properties">border properties</a><span>, in §5</span>
   <li><a href="#content-area">content area</a><span>, in §2</span>
   <li><a href="#content-box">content box</a><span>, in §2</span>
   <li><a href="#valdef-box-content-box">content-box</a><span>, in §2.1</span>
   <li><a href="#content-edge">content edge</a><span>, in §2</span>
   <li><a href="#typedef-coord-box">&lt;coord-box></a><span>, in §2.1</span>
   <li><a href="#valdef-box-fill-box">fill-box</a><span>, in §2.1</span>
   <li><a href="#valdef-margin-trim-in-flow">in-flow</a><span>, in §3.3</span>
   <li><a href="#inner-edge">inner edge</a><span>, in §2</span>
   <li><a href="#typedef-layout-box">&lt;layout-box></a><span>, in §2.1</span>
   <li>
    margin
    <ul>
     <li><a href="#propdef-margin">(property)</a><span>, in §3.2</span>
     <li><a href="#margin">definition of</a><span>, in §3</span>
    </ul>
   <li><a href="#margin-area">margin area</a><span>, in §2</span>
   <li><a href="#propdef-margin-bottom">margin-bottom</a><span>, in §3.1</span>
   <li><a href="#margin-box">margin box</a><span>, in §2</span>
   <li><a href="#valdef-box-margin-box">margin-box</a><span>, in §2.1</span>
   <li><a href="#margin-edge">margin edge</a><span>, in §2</span>
   <li><a href="#propdef-margin-left">margin-left</a><span>, in §3.1</span>
   <li><a href="#margin-properties">margin properties</a><span>, in §3</span>
   <li><a href="#propdef-margin-right">margin-right</a><span>, in §3.1</span>
   <li><a href="#propdef-margin-top">margin-top</a><span>, in §3.1</span>
   <li><a href="#propdef-margin-trim">margin-trim</a><span>, in §3.3</span>
   <li><a href="#valdef-margin-trim-none">none</a><span>, in §3.3</span>
   <li><a href="#outer-edge">outer edge</a><span>, in §2</span>
   <li><a href="#padding">Padding</a><span>, in §4</span>
   <li><a href="#propdef-padding">padding</a><span>, in §4.2</span>
   <li><a href="#padding-area">padding area</a><span>, in §2</span>
   <li><a href="#propdef-padding-bottom">padding-bottom</a><span>, in §4.1</span>
   <li><a href="#valdef-box-padding-box">padding-box</a><span>, in §2.1</span>
   <li><a href="#padding-box">padding box</a><span>, in §2</span>
   <li><a href="#padding-edge">padding edge</a><span>, in §2</span>
   <li><a href="#propdef-padding-left">padding-left</a><span>, in §4.1</span>
   <li><a href="#padding-properties">padding properties</a><span>, in §4</span>
   <li><a href="#propdef-padding-right">padding-right</a><span>, in §4.1</span>
   <li><a href="#propdef-padding-top">padding-top</a><span>, in §4.1</span>
   <li><a href="#typedef-paint-box">&lt;paint-box></a><span>, in §2.1</span>
   <li><a href="#valdef-box-stroke-box">stroke-box</a><span>, in §2.1</span>
   <li><a href="#valdef-box-view-box">view-box</a><span>, in §2.1</span>
   <li><a href="#typedef-visual-box">&lt;visual-box></a><span>, in §2.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-propdef-background">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background">https://drafts.csswg.org/css-backgrounds-3/#propdef-background</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background">2. The CSS Box Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-clip">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-clip">https://drafts.csswg.org/css-backgrounds-3/#propdef-background-clip</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-clip">2.1. Box-edge Keywords</a>
    <li><a href="#ref-for-propdef-background-clip①">4. Padding</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-origin">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin">https://drafts.csswg.org/css-backgrounds-3/#propdef-background-origin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-origin">4. Padding</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border">https://drafts.csswg.org/css-backgrounds-3/#propdef-border</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border">1. Introduction</a>
    <li><a href="#ref-for-propdef-border①">2. The CSS Box Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-box-fragment">
   <a href="https://drafts.csswg.org/css-break-4/#box-fragment">https://drafts.csswg.org/css-break-4/#box-fragment</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-box-fragment">2. The CSS Box Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-box-decoration-break">
   <a href="https://drafts.csswg.org/css-break-4/#propdef-box-decoration-break">https://drafts.csswg.org/css-break-4/#propdef-box-decoration-break</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-box-decoration-break">2. The CSS Box Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-fragmentation-break">
   <a href="https://drafts.csswg.org/css-break-4/#fragmentation-break">https://drafts.csswg.org/css-break-4/#fragmentation-break</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fragmentation-break">3. Margins</a>
    <li><a href="#ref-for-fragmentation-break①">3.3. Margins at Container Edges: the margin-trim property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-fragmentation-context">
   <a href="https://drafts.csswg.org/css-break-4/#fragmentation-context">https://drafts.csswg.org/css-break-4/#fragmentation-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fragmentation-context">3.3. Margins at Container Edges: the margin-trim property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-margin-break">
   <a href="https://drafts.csswg.org/css-break-4/#propdef-margin-break">https://drafts.csswg.org/css-break-4/#propdef-margin-break</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-break">3.3. Margins at Container Edges: the margin-trim property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-longhand">
   <a href="https://drafts.csswg.org/css-cascade-4/#longhand">https://drafts.csswg.org/css-cascade-4/#longhand</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-longhand">3. Margins</a> <a href="#ref-for-longhand①">(2)</a> <a href="#ref-for-longhand②">(3)</a>
    <li><a href="#ref-for-longhand③">4. Padding</a> <a href="#ref-for-longhand④">(2)</a> <a href="#ref-for-longhand⑤">(3)</a>
    <li><a href="#ref-for-longhand⑥">5. Borders</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-longhand">
   <a href="https://drafts.csswg.org/css-cascade-4/#longhand">https://drafts.csswg.org/css-cascade-4/#longhand</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-longhand">3. Margins</a> <a href="#ref-for-longhand①">(2)</a> <a href="#ref-for-longhand②">(3)</a>
    <li><a href="#ref-for-longhand③">4. Padding</a> <a href="#ref-for-longhand④">(2)</a> <a href="#ref-for-longhand⑤">(3)</a>
    <li><a href="#ref-for-longhand⑥">5. Borders</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-shorthand-property">
   <a href="https://drafts.csswg.org/css-cascade-4/#shorthand-property">https://drafts.csswg.org/css-cascade-4/#shorthand-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-shorthand-property">3. Margins</a>
    <li><a href="#ref-for-shorthand-property①">4. Padding</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-container">
   <a href="https://drafts.csswg.org/css-display-3/#block-container">https://drafts.csswg.org/css-display-3/#block-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-container">3.3. Margins at Container Edges: the margin-trim property</a> <a href="#ref-for-block-container①">(2)</a> <a href="#ref-for-block-container②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-formatting-context-root">
   <a href="https://drafts.csswg.org/css-display-3/#block-formatting-context-root">https://drafts.csswg.org/css-display-3/#block-formatting-context-root</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-formatting-context-root">3.3. Margins at Container Edges: the margin-trim property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-box">
   <a href="https://drafts.csswg.org/css-display-3/#box">https://drafts.csswg.org/css-display-3/#box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-box">1. Introduction</a> <a href="#ref-for-box①">(2)</a>
    <li><a href="#ref-for-box②">2. The CSS Box Model</a>
    <li><a href="#ref-for-box③">3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties</a>
    <li><a href="#ref-for-box④">4.1. Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-box tree">
   <a href="https://drafts.csswg.org/css-display-3/#box tree">https://drafts.csswg.org/css-display-3/#box tree</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-box%20tree">1. Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-containing-block">
   <a href="https://drafts.csswg.org/css-display-3/#containing-block">https://drafts.csswg.org/css-display-3/#containing-block</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-containing-block">2. The CSS Box Model</a>
    <li><a href="#ref-for-containing-block①">3.3. Margins at Container Edges: the margin-trim property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-internal-table-element">
   <a href="https://drafts.csswg.org/css-display-3/#internal-table-element">https://drafts.csswg.org/css-display-3/#internal-table-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-internal-table-element">3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties</a>
    <li><a href="#ref-for-internal-table-element①">3.2. Margin Shorthand: the margin property</a>
    <li><a href="#ref-for-internal-table-element②">4.1. Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties</a>
    <li><a href="#ref-for-internal-table-element③">4.2. Padding Shorthand: the padding property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-replaced-element">
   <a href="https://drafts.csswg.org/css-display-3/#replaced-element">https://drafts.csswg.org/css-display-3/#replaced-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-replaced-element">2. The CSS Box Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-flex-container">
   <a href="https://drafts.csswg.org/css-flexbox-1/#flex-container">https://drafts.csswg.org/css-flexbox-1/#flex-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flex-container">3.3. Margins at Container Edges: the margin-trim property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid-container">
   <a href="https://drafts.csswg.org/css-grid-1/#grid-container">https://drafts.csswg.org/css-grid-1/#grid-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid-container">3.3. Margins at Container Edges: the margin-trim property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-multi-column-container">
   <a href="https://drafts.csswg.org/css-multicol-1/#multi-column-container">https://drafts.csswg.org/css-multicol-1/#multi-column-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-multi-column-container">3.3. Margins at Container Edges: the margin-trim property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-selectordef-first-letter">
   <a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter">https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-first-letter">1.2. 
Module Interactions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-selectordef-first-line">
   <a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line">https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-first-line">1.2. 
Module Interactions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-intrinsic-size-contribution">
   <a href="https://drafts.csswg.org/css-sizing-3/#intrinsic-size-contribution">https://drafts.csswg.org/css-sizing-3/#intrinsic-size-contribution</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-intrinsic-size-contribution">3.3. Margins at Container Edges: the margin-trim property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-size">
   <a href="https://drafts.csswg.org/css-sizing-3/#size">https://drafts.csswg.org/css-sizing-3/#size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-size">3.3. Margins at Container Edges: the margin-trim property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sizing-property">
   <a href="https://drafts.csswg.org/css-sizing-3/#sizing-property">https://drafts.csswg.org/css-sizing-3/#sizing-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sizing-property">1. Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-transform-box">
   <a href="https://drafts.csswg.org/css-transforms-1/#propdef-transform-box">https://drafts.csswg.org/css-transforms-1/#propdef-transform-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-transform-box">2.1. Box-edge Keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-length-percentage">
   <a href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage">https://drafts.csswg.org/css-values-4/#typedef-length-percentage</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-length-percentage">3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties</a> <a href="#ref-for-typedef-length-percentage①">(2)</a>
    <li><a href="#ref-for-typedef-length-percentage②">4.1. Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties</a> <a href="#ref-for-typedef-length-percentage③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css-wide-keywords">
   <a href="https://drafts.csswg.org/css-values-4/#css-wide-keywords">https://drafts.csswg.org/css-values-4/#css-wide-keywords</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-wide-keywords">1.1. 
Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-num-range">
   <a href="https://drafts.csswg.org/css-values-4/#mult-num-range">https://drafts.csswg.org/css-values-4/#mult-num-range</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-num-range">3.2. Margin Shorthand: the margin property</a>
    <li><a href="#ref-for-mult-num-range①">4.2. Padding Shorthand: the padding property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties</a>
    <li><a href="#ref-for-comb-one①">3.3. Margins at Container Edges: the margin-trim property</a> <a href="#ref-for-comb-one②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-size">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#block-size">https://drafts.csswg.org/css-writing-modes-4/#block-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-size">3.3. Margins at Container Edges: the margin-trim property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-end">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#block-end">https://drafts.csswg.org/css-writing-modes-4/#block-end</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-end">3.3. Margins at Container Edges: the margin-trim property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-start">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#block-start">https://drafts.csswg.org/css-writing-modes-4/#block-start</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-start">3.3. Margins at Container Edges: the margin-trim property</a> <a href="#ref-for-block-start①">(2)</a> <a href="#ref-for-block-start②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-flow-relative">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative">https://drafts.csswg.org/css-writing-modes-4/#flow-relative</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flow-relative">3. Margins</a>
    <li><a href="#ref-for-flow-relative①">4. Padding</a>
    <li><a href="#ref-for-flow-relative②">5. Borders</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-axis">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis">https://drafts.csswg.org/css-writing-modes-4/#inline-axis</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-axis">3.3. Margins at Container Edges: the margin-trim property</a> <a href="#ref-for-inline-axis①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-axis">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis">https://drafts.csswg.org/css-writing-modes-4/#inline-axis</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-axis">3.3. Margins at Container Edges: the margin-trim property</a> <a href="#ref-for-inline-axis①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-end">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#inline-end">https://drafts.csswg.org/css-writing-modes-4/#inline-end</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-end">3.3. Margins at Container Edges: the margin-trim property</a> <a href="#ref-for-inline-end①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-start">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#inline-start">https://drafts.csswg.org/css-writing-modes-4/#inline-start</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-start">3.3. Margins at Container Edges: the margin-trim property</a> <a href="#ref-for-inline-start①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-logical-width">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#logical-width">https://drafts.csswg.org/css-writing-modes-4/#logical-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-logical-width">3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties</a>
    <li><a href="#ref-for-logical-width①">3.2. Margin Shorthand: the margin property</a>
    <li><a href="#ref-for-logical-width②">4.1. Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties</a>
    <li><a href="#ref-for-logical-width③">4.2. Padding Shorthand: the padding property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-physical">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#physical">https://drafts.csswg.org/css-writing-modes-4/#physical</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-physical">3. Margins</a>
    <li><a href="#ref-for-physical①">4. Padding</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-writing-mode">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode">https://drafts.csswg.org/css-writing-modes-4/#writing-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-writing-mode">6. Changes Since CSS Level 2</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-document-tree">
   <a href="https://dom.spec.whatwg.org/#concept-document-tree">https://dom.spec.whatwg.org/#concept-document-tree</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-document-tree">1. Introduction</a> <a href="#ref-for-concept-document-tree①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermCanvas">
   <a href="https://svgwg.org/svg2-draft/coords.html#TermCanvas">https://svgwg.org/svg2-draft/coords.html#TermCanvas</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermCanvas">1. Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermObjectBoundingBox">
   <a href="https://svgwg.org/svg2-draft/coords.html#TermObjectBoundingBox">https://svgwg.org/svg2-draft/coords.html#TermObjectBoundingBox</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermObjectBoundingBox">2.1. Box-edge Keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermStrokeBoundingBox">
   <a href="https://svgwg.org/svg2-draft/coords.html#TermStrokeBoundingBox">https://svgwg.org/svg2-draft/coords.html#TermStrokeBoundingBox</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermStrokeBoundingBox">2.1. Box-edge Keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermSVGViewport">
   <a href="https://svgwg.org/svg2-draft/coords.html#TermSVGViewport">https://svgwg.org/svg2-draft/coords.html#TermSVGViewport</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermSVGViewport">2.1. Box-edge Keywords</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-backgrounds-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-background" style="color:initial">background</span>
     <li><span class="dfn-paneled" id="term-for-propdef-background-clip" style="color:initial">background-clip</span>
     <li><span class="dfn-paneled" id="term-for-propdef-background-origin" style="color:initial">background-origin</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border" style="color:initial">border</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-break-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-box-fragment" style="color:initial">box fragment</span>
     <li><span class="dfn-paneled" id="term-for-propdef-box-decoration-break" style="color:initial">box-decoration-break</span>
     <li><span class="dfn-paneled" id="term-for-fragmentation-break" style="color:initial">fragmentation break</span>
     <li><span class="dfn-paneled" id="term-for-fragmentation-context" style="color:initial">fragmentation context</span>
     <li><span class="dfn-paneled" id="term-for-propdef-margin-break" style="color:initial">margin-break</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-cascade-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-longhand" style="color:initial">longhand</span>
     <li><span class="dfn-paneled" id="term-for-longhand①" style="color:initial">longhand property</span>
     <li><span class="dfn-paneled" id="term-for-shorthand-property" style="color:initial">shorthand property</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-display-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-block-container" style="color:initial">block container</span>
     <li><span class="dfn-paneled" id="term-for-block-formatting-context-root" style="color:initial">block formatting context root</span>
     <li><span class="dfn-paneled" id="term-for-box" style="color:initial">box</span>
     <li><span class="dfn-paneled" id="term-for-box tree" style="color:initial">box tree</span>
     <li><span class="dfn-paneled" id="term-for-containing-block" style="color:initial">containing block</span>
     <li><span class="dfn-paneled" id="term-for-internal-table-element" style="color:initial">internal table element</span>
     <li><span class="dfn-paneled" id="term-for-replaced-element" style="color:initial">replaced element</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-flexbox-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-flex-container" style="color:initial">flex container</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-grid-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-grid-container" style="color:initial">grid container</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-multicol-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-multi-column-container" style="color:initial">multi-column container</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-pseudo-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-selectordef-first-letter" style="color:initial">::first-letter</span>
     <li><span class="dfn-paneled" id="term-for-selectordef-first-line" style="color:initial">::first-line</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-sizing-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-intrinsic-size-contribution" style="color:initial">intrinsic size contribution</span>
     <li><span class="dfn-paneled" id="term-for-size" style="color:initial">size</span>
     <li><span class="dfn-paneled" id="term-for-sizing-property" style="color:initial">sizing property</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-transforms-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-transform-box" style="color:initial">transform-box</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-length-percentage" style="color:initial">&lt;length-percentage></span>
     <li><span class="dfn-paneled" id="term-for-css-wide-keywords" style="color:initial">css-wide keywords</span>
     <li><span class="dfn-paneled" id="term-for-mult-num-range" style="color:initial">{a,b}</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-writing-modes-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-block-size" style="color:initial">block size</span>
     <li><span class="dfn-paneled" id="term-for-block-end" style="color:initial">block-end</span>
     <li><span class="dfn-paneled" id="term-for-block-start" style="color:initial">block-start</span>
     <li><span class="dfn-paneled" id="term-for-flow-relative" style="color:initial">flow-relative</span>
     <li><span class="dfn-paneled" id="term-for-inline-axis" style="color:initial">inline axis</span>
     <li><span class="dfn-paneled" id="term-for-inline-axis①" style="color:initial">inline-axis</span>
     <li><span class="dfn-paneled" id="term-for-inline-end" style="color:initial">inline-end</span>
     <li><span class="dfn-paneled" id="term-for-inline-start" style="color:initial">inline-start</span>
     <li><span class="dfn-paneled" id="term-for-logical-width" style="color:initial">logical width</span>
     <li><span class="dfn-paneled" id="term-for-physical" style="color:initial">physical</span>
     <li><span class="dfn-paneled" id="term-for-writing-mode" style="color:initial">writing mode</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-concept-document-tree" style="color:initial">document tree</span>
    </ul>
   <li>
    <a data-link-type="biblio">[SVG2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-TermCanvas" style="color:initial">canvas</span>
     <li><span class="dfn-paneled" id="term-for-TermObjectBoundingBox" style="color:initial">object bounding box</span>
     <li><span class="dfn-paneled" id="term-for-TermStrokeBoundingBox" style="color:initial">stroke bounding box</span>
     <li><span class="dfn-paneled" id="term-for-TermSVGViewport" style="color:initial">svg viewports</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3]
   <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders Module Level 3</a>. 17 October 2017. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a>
   <dt id="biblio-css-break-4">[CSS-BREAK-4]
   <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-4/">CSS Fragmentation Module Level 4</a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-break-4/">https://www.w3.org/TR/css-break-4/</a>
   <dt id="biblio-css-cascade-4">[CSS-CASCADE-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a>
   <dt id="biblio-css-display-3">[CSS-DISPLAY-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
   <dt id="biblio-css-flexbox-1">[CSS-FLEXBOX-1]
   <dd>Tab Atkins Jr.; et al. <a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a>. 19 November 2018. CR. URL: <a href="https://www.w3.org/TR/css-flexbox-1/">https://www.w3.org/TR/css-flexbox-1/</a>
   <dt id="biblio-css-grid-1">[CSS-GRID-1]
   <dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="https://www.w3.org/TR/css-grid-1/">CSS Grid Layout Module Level 1</a>. 14 December 2017. CR. URL: <a href="https://www.w3.org/TR/css-grid-1/">https://www.w3.org/TR/css-grid-1/</a>
   <dt id="biblio-css-multicol-1">[CSS-MULTICOL-1]
   <dd>Florian Rivoal; Rachel Andrew. <a href="https://www.w3.org/TR/css-multicol-1/">CSS Multi-column Layout Module Level 1</a>. 28 May 2018. WD. URL: <a href="https://www.w3.org/TR/css-multicol-1/">https://www.w3.org/TR/css-multicol-1/</a>
   <dt id="biblio-css-pseudo-4">[CSS-PSEUDO-4]
   <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="https://www.w3.org/TR/css-pseudo-4/">CSS Pseudo-Elements Module Level 4</a>. 25 February 2019. WD. URL: <a href="https://www.w3.org/TR/css-pseudo-4/">https://www.w3.org/TR/css-pseudo-4/</a>
   <dt id="biblio-css-sizing-3">[CSS-SIZING-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-sizing-3/">CSS Intrinsic &amp; Extrinsic Sizing Module Level 3</a>. 22 May 2019. WD. URL: <a href="https://www.w3.org/TR/css-sizing-3/">https://www.w3.org/TR/css-sizing-3/</a>
   <dt id="biblio-css-transforms-1">[CSS-TRANSFORMS-1]
   <dd>Simon Fraser; et al. <a href="https://www.w3.org/TR/css-transforms-1/">CSS Transforms Module Level 1</a>. 14 February 2019. CR. URL: <a href="https://www.w3.org/TR/css-transforms-1/">https://www.w3.org/TR/css-transforms-1/</a>
   <dt id="biblio-css-values-3">[CSS-VALUES-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 31 January 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-4/">CSS Writing Modes Level 4</a>. 24 May 2018. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a>
   <dt id="biblio-css2">[CSS2]
   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-svg2">[SVG2]
   <dd>Amelia Bellamy-Royds; et al. <a href="https://www.w3.org/TR/SVG2/">Scalable Vector Graphics (SVG) 2</a>. 4 October 2018. CR. URL: <a href="https://www.w3.org/TR/SVG2/">https://www.w3.org/TR/SVG2/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-css-break-3">[CSS-BREAK-3]
   <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-3/">CSS Fragmentation Module Level 3</a>. 4 December 2018. CR. URL: <a href="https://www.w3.org/TR/css-break-3/">https://www.w3.org/TR/css-break-3/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
  <div class="big-element-wrapper">
   <table class="index">
    <thead>
     <tr>
      <th scope="col">Name
      <th scope="col">Value
      <th scope="col">Initial
      <th scope="col">Applies to
      <th scope="col">Inh.
      <th scope="col">%ages
      <th scope="col">Anim­ation type
      <th scope="col">Canonical order
      <th scope="col">Com­puted value
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin" id="ref-for-propdef-margin⑦">margin</a>
      <td>&lt;'margin-top'>{1,4}
      <td>0
      <td>all elements except internal table elements
      <td>no
      <td>refer to logical width of containing block
      <td>by computed value type
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-bottom" id="ref-for-propdef-margin-bottom②">margin-bottom</a>
      <td>&lt;length-percentage> | auto
      <td>0
      <td>all elements except internal table elements
      <td>no
      <td>refer to logical width of containing block
      <td>by computed value type
      <td>per grammar
      <td>the keyword auto or a computed &lt;length-percentage> value
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-left" id="ref-for-propdef-margin-left②">margin-left</a>
      <td>&lt;length-percentage> | auto
      <td>0
      <td>all elements except internal table elements
      <td>no
      <td>refer to logical width of containing block
      <td>by computed value type
      <td>per grammar
      <td>the keyword auto or a computed &lt;length-percentage> value
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-right" id="ref-for-propdef-margin-right②">margin-right</a>
      <td>&lt;length-percentage> | auto
      <td>0
      <td>all elements except internal table elements
      <td>no
      <td>refer to logical width of containing block
      <td>by computed value type
      <td>per grammar
      <td>the keyword auto or a computed &lt;length-percentage> value
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-top" id="ref-for-propdef-margin-top③">margin-top</a>
      <td>&lt;length-percentage> | auto
      <td>0
      <td>all elements except internal table elements
      <td>no
      <td>refer to logical width of containing block
      <td>by computed value type
      <td>per grammar
      <td>the keyword auto or a computed &lt;length-percentage> value
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-margin-trim" id="ref-for-propdef-margin-trim⑤">margin-trim</a>
      <td>none | in-flow | all
      <td>none
      <td>block containers, multi-column containers
      <td>no
      <td>N/A
      <td>discrete
      <td>per grammar
      <td>keyword as specified
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding" id="ref-for-propdef-padding⑦">padding</a>
      <td>&lt;'padding-top'>{1,4}
      <td>0
      <td>all elements except: internal table elements other than table cells
      <td>no
      <td>refer to logical width of containing block
      <td>by computed value type
      <td>per grammar
      <td>see individual properties
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding-bottom" id="ref-for-propdef-padding-bottom②">padding-bottom</a>
      <td>&lt;length-percentage>
      <td>0
      <td>all elements except: internal table elements other than table cells
      <td>no
      <td>refer to logical width of containing block
      <td>by computed value type
      <td>per grammar
      <td>a computed &lt;length-percentage> value
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding-left" id="ref-for-propdef-padding-left②">padding-left</a>
      <td>&lt;length-percentage>
      <td>0
      <td>all elements except: internal table elements other than table cells
      <td>no
      <td>refer to logical width of containing block
      <td>by computed value type
      <td>per grammar
      <td>a computed &lt;length-percentage> value
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding-right" id="ref-for-propdef-padding-right②">padding-right</a>
      <td>&lt;length-percentage>
      <td>0
      <td>all elements except: internal table elements other than table cells
      <td>no
      <td>refer to logical width of containing block
      <td>by computed value type
      <td>per grammar
      <td>a computed &lt;length-percentage> value
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-padding-top" id="ref-for-propdef-padding-top③">padding-top</a>
      <td>&lt;length-percentage>
      <td>0
      <td>all elements except: internal table elements other than table cells
      <td>no
      <td>refer to logical width of containing block
      <td>by computed value type
      <td>per grammar
      <td>a computed &lt;length-percentage> value
   </table>
  </div>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> Should this property apply to <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container">flex containers</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container">grid containers</a>?<a href="#issue-565fb2af"> ↵ </a></div>
   <div class="issue"> Should floats have a <span class="css">floats</span> value that only affects floats?<a href="#issue-9536d78c"> ↵ </a></div>
   <div class="issue"> Define how this property affects margins at breaks
	if the box establishes a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation-context">fragmentation context</a>.
	See also <a href="https://github.com/w3c/csswg-drafts/issues/3314">Issue 3314</a>.<a href="#issue-c93b5c6f"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="content-area">
   <b><a href="#content-area">#content-area</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-content-area">2. The CSS Box Model</a> <a href="#ref-for-content-area①">(2)</a> <a href="#ref-for-content-area②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="padding-area">
   <b><a href="#padding-area">#padding-area</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-padding-area">2. The CSS Box Model</a> <a href="#ref-for-padding-area①">(2)</a> <a href="#ref-for-padding-area②">(3)</a>
    <li><a href="#ref-for-padding-area③">4. Padding</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="border-area">
   <b><a href="#border-area">#border-area</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-border-area">2. The CSS Box Model</a> <a href="#ref-for-border-area①">(2)</a>
    <li><a href="#ref-for-border-area②">4. Padding</a>
    <li><a href="#ref-for-border-area③">5. Borders</a> <a href="#ref-for-border-area④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="margin-area">
   <b><a href="#margin-area">#margin-area</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-margin-area">2. The CSS Box Model</a>
    <li><a href="#ref-for-margin-area①">3. Margins</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="content-edge">
   <b><a href="#content-edge">#content-edge</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-content-edge">2. The CSS Box Model</a>
    <li><a href="#ref-for-content-edge①">2.1. Box-edge Keywords</a>
    <li><a href="#ref-for-content-edge②">3.3. Margins at Container Edges: the margin-trim property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="inner-edge">
   <b><a href="#inner-edge">#inner-edge</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inner-edge">3.3. Margins at Container Edges: the margin-trim property</a> <a href="#ref-for-inner-edge①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="content-box">
   <b><a href="#content-box">#content-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-content-box">2. The CSS Box Model</a>
    <li><a href="#ref-for-content-box①">2.1. Box-edge Keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="padding-edge">
   <b><a href="#padding-edge">#padding-edge</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-padding-edge">2. The CSS Box Model</a>
    <li><a href="#ref-for-padding-edge①">2.1. Box-edge Keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="padding-box">
   <b><a href="#padding-box">#padding-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-padding-box">2. The CSS Box Model</a>
    <li><a href="#ref-for-padding-box①">2.1. Box-edge Keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="border-edge">
   <b><a href="#border-edge">#border-edge</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-border-edge">2. The CSS Box Model</a>
    <li><a href="#ref-for-border-edge①">2.1. Box-edge Keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="border-box">
   <b><a href="#border-box">#border-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-border-box">2. The CSS Box Model</a>
    <li><a href="#ref-for-border-box①">2.1. Box-edge Keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="margin-edge">
   <b><a href="#margin-edge">#margin-edge</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-margin-edge">2. The CSS Box Model</a>
    <li><a href="#ref-for-margin-edge①">2.1. Box-edge Keywords</a>
    <li><a href="#ref-for-margin-edge②">3.3. Margins at Container Edges: the margin-trim property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="outer-edge">
   <b><a href="#outer-edge">#outer-edge</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-outer-edge">3.3. Margins at Container Edges: the margin-trim property</a> <a href="#ref-for-outer-edge①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="margin-box">
   <b><a href="#margin-box">#margin-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-margin-box">2. The CSS Box Model</a>
    <li><a href="#ref-for-margin-box①">2.1. Box-edge Keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-box-content-box">
   <b><a href="#valdef-box-content-box">#valdef-box-content-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-box-content-box">2.1. Box-edge Keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-box-border-box">
   <b><a href="#valdef-box-border-box">#valdef-box-border-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-box-border-box">2.1. Box-edge Keywords</a> <a href="#ref-for-valdef-box-border-box①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-box-fill-box">
   <b><a href="#valdef-box-fill-box">#valdef-box-fill-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-box-fill-box">2.1. Box-edge Keywords</a> <a href="#ref-for-valdef-box-fill-box①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-box-stroke-box">
   <b><a href="#valdef-box-stroke-box">#valdef-box-stroke-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-box-stroke-box">2.1. Box-edge Keywords</a> <a href="#ref-for-valdef-box-stroke-box①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-visual-box">
   <b><a href="#typedef-visual-box">#typedef-visual-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-visual-box">2.1. Box-edge Keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-layout-box">
   <b><a href="#typedef-layout-box">#typedef-layout-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-layout-box">2.1. Box-edge Keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-paint-box">
   <b><a href="#typedef-paint-box">#typedef-paint-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-paint-box">2.1. Box-edge Keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-coord-box">
   <b><a href="#typedef-coord-box">#typedef-coord-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-coord-box">2.1. Box-edge Keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="margin">
   <b><a href="#margin">#margin</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-margin">3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties</a>
    <li><a href="#ref-for-margin①">3.3. Margins at Container Edges: the margin-trim property</a> <a href="#ref-for-margin②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-margin-top">
   <b><a href="#propdef-margin-top">#propdef-margin-top</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-top">3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties</a>
    <li><a href="#ref-for-propdef-margin-top①">3.2. Margin Shorthand: the margin property</a> <a href="#ref-for-propdef-margin-top②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-margin-right">
   <b><a href="#propdef-margin-right">#propdef-margin-right</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-right">3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties</a>
    <li><a href="#ref-for-propdef-margin-right①">3.2. Margin Shorthand: the margin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-margin-bottom">
   <b><a href="#propdef-margin-bottom">#propdef-margin-bottom</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-bottom">3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties</a>
    <li><a href="#ref-for-propdef-margin-bottom①">3.2. Margin Shorthand: the margin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-margin-left">
   <b><a href="#propdef-margin-left">#propdef-margin-left</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-left">3.1. Page-relative (Physical) Margin Properties: the margin-top, margin-right, margin-bottom, and margin-left properties</a>
    <li><a href="#ref-for-propdef-margin-left①">3.2. Margin Shorthand: the margin property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-margin">
   <b><a href="#propdef-margin">#propdef-margin</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin">1. Introduction</a>
    <li><a href="#ref-for-propdef-margin①">3. Margins</a> <a href="#ref-for-propdef-margin②">(2)</a> <a href="#ref-for-propdef-margin③">(3)</a>
    <li><a href="#ref-for-propdef-margin④">3.2. Margin Shorthand: the margin property</a> <a href="#ref-for-propdef-margin⑤">(2)</a> <a href="#ref-for-propdef-margin⑥">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-margin-trim">
   <b><a href="#propdef-margin-trim">#propdef-margin-trim</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-trim">3.3. Margins at Container Edges: the margin-trim property</a> <a href="#ref-for-propdef-margin-trim①">(2)</a> <a href="#ref-for-propdef-margin-trim②">(3)</a> <a href="#ref-for-propdef-margin-trim③">(4)</a>
    <li><a href="#ref-for-propdef-margin-trim④">6. Changes Since CSS Level 2</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-margin-trim-in-flow">
   <b><a href="#valdef-margin-trim-in-flow">#valdef-margin-trim-in-flow</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-margin-trim-in-flow">3.3. Margins at Container Edges: the margin-trim property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="padding">
   <b><a href="#padding">#padding</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-padding">4.1. Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-padding-top">
   <b><a href="#propdef-padding-top">#propdef-padding-top</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-top">4.1. Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties</a>
    <li><a href="#ref-for-propdef-padding-top①">4.2. Padding Shorthand: the padding property</a> <a href="#ref-for-propdef-padding-top②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-padding-right">
   <b><a href="#propdef-padding-right">#propdef-padding-right</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-right">4.1. Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties</a>
    <li><a href="#ref-for-propdef-padding-right①">4.2. Padding Shorthand: the padding property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-padding-bottom">
   <b><a href="#propdef-padding-bottom">#propdef-padding-bottom</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-bottom">4.1. Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties</a>
    <li><a href="#ref-for-propdef-padding-bottom①">4.2. Padding Shorthand: the padding property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-padding-left">
   <b><a href="#propdef-padding-left">#propdef-padding-left</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-left">4.1. Page-relative (Physical) Padding Properties: the padding-top, padding-right, padding-bottom, and padding-left properties</a>
    <li><a href="#ref-for-propdef-padding-left①">4.2. Padding Shorthand: the padding property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-padding">
   <b><a href="#propdef-padding">#propdef-padding</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding">1. Introduction</a>
    <li><a href="#ref-for-propdef-padding①">4. Padding</a> <a href="#ref-for-propdef-padding②">(2)</a> <a href="#ref-for-propdef-padding③">(3)</a>
    <li><a href="#ref-for-propdef-padding④">4.2. Padding Shorthand: the padding property</a> <a href="#ref-for-propdef-padding⑤">(2)</a> <a href="#ref-for-propdef-padding⑥">(3)</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>